<template>
	<view class="performance-page">
		<!-- 导航栏 -->
		<free-nav-bar textContent="经营状况" isBackShow></free-nav-bar>
		<view class="performance-wrapper">
			<view class="performance__top">
				<ul class="flex">
					<li>
						<span class="num main-text-color">100</span>
						<span class="text">今日交易订单</span>
					</li>
					<li>
						<span class="num main-text-color">2</span>
						<span class="text">今日售后</span>
					</li>
					<li>
						<span class="num main-text-color">20</span>
						<span class="text">今日补发</span>
					</li>
				</ul>
			</view>
			<view class="performance__details">
				<ul class="flex">
					<li>
						<span class="num main-text-color">1263</span>
						<span class="text">累计订单</span>
					</li>
					<li>
						<span class="num main-text-color">5632.00</span>
						<span class="text">累计收益(元)</span>
					</li>
					<li>
						<span class="num main-text-color">50</span>
						<span class="text">累计售后</span>
					</li>
					<li>
						<span class="num main-text-color">6</span>
						<span class="text">退款单量</span>
					</li>
				</ul>
			</view>
			<view class="performance__data">
				<view class="title main-text-color font28">今日交易数据</view>
				<view class="performance__chart">
					<l-echart ref="chart" @finished="init"></l-echart>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	// import * as echarts from 'echarts'
	import { nextTick } from "vue";
	export default {
		components: {
			freeNavBar
		},
		data() {
			return {
				option: {
					xAxis: {
					    type: 'category',
					    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
					},
					yAxis: {
					    type: 'value'
					},
					series: [
					    {
					      data: [150, 230, 224, 218, 135, 147, 260],
					      type: 'line'
					    }
					]
				},
			}
		},
		mounted() {
			// this.$refs.chart.init(echarts, chart => {
			// 	chart.setOption(this.option);
			// });
		},
		methods: {
			async init() {
				// chart 图表实例不能存在data里
				// const chart = await this.$refs.chart.init(echarts);
				// chart.setOption(this.option)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.performance-page {
		.performance__top {
			margin-top: 16rpx;
			margin-bottom: 16rpx;
		}
		.performance__top,.performance__details {
			background: #fff;
			padding: 52rpx 0;
			ul {
				padding: 0;
			}
			li {
				flex: 1;
				text-align: center;
				
				span {
					display: block;
				}
				
				.num {
					font-size: 30rpx;
					line-height: 42rpx;
					font-weight: bold;
				}
				.text {
					font-size: 24rpx;
					color: #666;
					line-height: 33rpx;
					margin-top: 8rpx;
				}
			}
		}
		.performance__data {
			margin-top: 16rpx;
			background: #fff;
			
			.title {
				height: 68rpx;
				line-height: 68rpx;
				padding-left: 24rpx;
				border-bottom: 1px solid #EBEBEB;
			}
		}
	}
</style>
